<template>
    <view id="registered">
        <view class="form">
        	<view class="form-title">邮箱</view>
        	<input class="uni-input" name="email" maxlength="20" v-model="email" placeholder="请输入邮箱" />
            <view class="form-action"></view>
        </view>
        <view class="form">
        	<view class="form-title">机构名称</view>
        	<input class="uni-input" name="orgname" maxlength="30" v-model="orgname" placeholder="请输入机构名称" />
            <view class="form-action"></view>
        </view>
        <view class="form">
        	<view class="form-title">验证码</view>
        	<input class="uni-input" name="code" maxlength="6" v-model="code" placeholder="请输入验证码" />
        	<view class="form-action"><button class="sendBtn" @click="sendCode" type="info" :disabled="codeBtn.disabled" size="mini">{{codeBtn.text}}</button></view>
        </view>
        <view class="form top-margin">
        	<view class="form-title">地区</view>
            <picker class="picker" mode="region" :value="region" @change="regionChange">
                <input class="uni-input" name="county_id" disabled="true" :value="selectedRegion" placeholder="选择地区信息" />
                <uni-icons class="picker-icons" type="arrowright"  size="20" />
            </picker>
        </view>
        <view class="form">
        	<view class="form-title">详细地址</view>
        	<!-- <input class="uni-input" name="address" maxlength="100" disabled="true" v-model="address" placeholder="街道门牌信息" /> -->
        	<input class="uni-input" name="address" maxlength="100" disabled="true" placeholder="街道门牌信息" />
            <view class="form-action"></view>
        </view>
        <view class="uni-textarea">
            <textarea class="textarea" v-model="address" placeholder="请输入街道门牌信息" />
        </view>
        <view class="form top-margin">
        	<view class="form-title">密码</view>
        	<input class="uni-input" name="password" type="password" maxlength="20" v-model="password" placeholder="请输入账号密码" />
            <view class="form-action"></view>
        </view>
        <view class="form">
        	<view class="form-title">确认密码</view>
        	<input class="uni-input" name="repassword" type="password" maxlength="20" v-model="repassword" placeholder="请再次输入账号密码" />
            <view class="form-action"></view>
        </view>
        <button @click="sumbitFun" :disabled="!agreeFlag" class="btn" type="primary" >注册</button>
        <view class="tip">
            <checkbox-group  class="checkGroup" @change="changeProtocol">
            <label>
                我已阅读并同意<navigator class="navbtn" hover-class="none" url="/pages/home/personalSettings/protocol?url=http://g.yunbisai.com/protocol/userProtocol.html">《用户注册协议》</navigator>
                <checkbox class="checkbox" :value="agree"></checkbox>
            </label>
            </checkbox-group>
        </view>
    </view>
</template>
<script>
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import validate from '@/common/ys-validate.js'
    import { sendEmail, registerYun } from '@/common/api.js'
    export default {
        name: "registered",
        data() {
            return {
                email:'',
                orgname:'',
                address:'',
                code:'',
                phone:'',
                password:'',
                repassword:'',
                agreeFlag:false,
                agree:'agree',
                codeBtn:{
                    disabled:false,
                    text:'发送验证码'
                },
                region:[],
                selectedRegion:'',
                county_id:'',
            };
        },
        components: {
            uniIcons,
        },
        methods: {
            sendCode(){
                if(this.email){
                    if(!validate.isEmail(this.email)){
                        uni.showToast({
                            icon: 'none',
                            title: '请输入正确邮箱'
                        })
                        return;
                    }
                    let time=60;
                    this.codeBtn.disabled=true;
                    this.codeBtn.text=`重新发送(${time})`;
                    const timer = setInterval(()=>{
                        this.codeBtn.text=`重新发送(${time--})`;
                        if(time<0){
                            this.codeBtn.disabled=false;
                            this.codeBtn.text='发送验证码'
                            clearInterval(timer)
                        }
                    },1000)
                    sendEmail({mail:this.email}).then((res)=>{
                        const data = res.data;
                        if(data.errcode==0){
                            uni.showToast({
                                icon: 'none',
                                title: '发送成功'
                            })
                        }else{
                            uni.showToast({
                                icon: 'none',
                                title: data.msg
                            })
                        }
                    })
                }else{
                    uni.showToast({
                        icon: 'none',
                        title: '请先输入邮箱'
                    })
                }
            },
            sumbitFun(){
                if(!validate.isEmail(this.email)){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入正确邮箱'
                    })
                    return;
                }
                if(!/^[a-zA-Z\u4e00-\u9fa5]+$/.test(this.orgname)){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入正确机构名称'
                    })
                    return;
                }
                if(!this.code){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入验证码'
                    })
                    return;
                }
                if(!this.county_id){
                    uni.showToast({
                        icon: 'none',
                        title: '请选择地区'
                    })
                    return;
                }
                if(!this.address){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入详细地址'
                    })
                    return;
                }
                if(!this.password || !this.repassword){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入两次密码'
                    })
                    return;
                }
                if(this.password!=this.repassword){
                    uni.showToast({
                        icon: 'none',
                        title: '两次密码不一致'
                    })
                    return;
                }

                registerYun({
                    email:this.email,
                    cname:this.orgname,
                    vercode:this.code,
                    password:this.password,
                    repassword:this.repassword,
                    county_id:this.county_id,        //330101
                    address:this.address
                }).then((res)=>{
                    const data = res.data
                    if(data.errcode==0){
                        uni.showModal({
                            title: '提示',
                            content: '注册成功',
                            success: function (res) {
                                if (res.confirm) {
                                    uni.navigateBack({
                                        delta: 1
                                    });
                                    // uni.reLaunch({
                                    //     url: '/pages/home/personalSettings/personalSettings'
                                    // });
                                } else if (res.cancel) {

                                }
                            }
                        });
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	position: 'center',
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
            },
            changeProtocol(e){

                if(e.detail.value.length){
                    this.agreeFlag=true
                }else{
                    this.agreeFlag=false
                }
            },
            regionChange(e){
                console.log(this.region);
                this.county_id=e.detail.code[2];
                this.selectedRegion=`${e.detail.value[0]} ${e.detail.value[1]} ${e.detail.value[2]}`
            }
        }
    };
</script>
<style lang="scss">
    #registered {
        position: relative;
        padding-top: 24rpx;
        .top-margin{
            margin-top: 20rpx;
        }
        .uni-textarea{
            .textarea{
                padding-left: 30rpx;
                padding-right: 30rpx;
            }
        }
        .form{
            display: flex;
            align-items: center;
            flex: 1;
            background: #fff;

            flex-direction: row;
            justify-content: space-between;
            .picker{
                width: 100%;
                margin-left: 40rpx;
                position: relative;
                .picker-icons{
                    bottom: 0px;
                    right: 40rpx;
                    position: absolute;
                }
            }
            .form-title{
                padding: 20rpx;
                padding-left: 30rpx;
                width: 150rpx;
            }
            .form-action{
                padding: 10rpx 30rpx;
                display: flex;
                .sendBtn{
                    color: #000;
                }
            }
        }
        .btn{
            margin: 30rpx;
            font-size: 32rpx;
            margin-top: 60rpx;
            border-radius: 50rpx;
            color: #fff;
            background: #1A66FF;
        }
        .tip{
            padding: 30rpx;
            padding-top: 0;
            font-size: 24rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .checkGroup{
                width: auto;
            }
            .navbtn{
                display: inline-block;
                color: #FD7379;
            }
            .checkbox{
                transform:scale(0.6)
            }
        }
    }
</style>
